<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style2.css" />


</head>
<body>
	<form action="${pageContext.request.contextPath}/user_register.action"
		method="post">
		<div class="main">
			<div class="mainin">
				<div class="mainin1">
					<ul>
						<li><span>用户名：</span> <input name="username" type="text"
							id="user_name" onblur="checkCode()" class="SearchKeyword" /> <span
							id="userNameSpan" style="FONT-WEIGHT: bold; COLOR: red"></span></li>
						<li><span>密码：</span> <input type="password" name="password"
							id="user_password" class="SearchKeyword2" /> <span
							id="passwordSpan" style="FONT-WEIGHT: bold; COLOR: red"></span></li>
						<li><button class="tijiao" type="submit">马上注册</button></li>
					</ul>
				</div>
				<div class="footpage">
					<span style="" font-family:arial;""="">Copyright ?</span>2018 <a
						href="http://www.baidu.com/" target="_blank">客户信息管理平台</a> － 也许很好用
				</div>
			</div>
		</div>
	</form>
	<img src="images/loading.gif" id="loading"
		style="display: none; position: absolute;" />
	<div id="POPLoading" class="cssPOPLoading">
		<div style="height: 110px; border-bottom: 1px solid #9a9a9a">
			<div class="showMessge"></div>
		</div>
		<div style="line-height: 40px; font-size: 14px; letter-spacing: 1px;">
			<a onclick="puc()">确定</a>
		</div>
	</div>
	<div style="text-align: center;">
		<p>
			更多课程：<a href="http://www.baidu.com/" target="_blank">leon</a>
		</p>
	</div>
	<input type="button" value="点我" onclick="sendJson()" />&nbsp;&nbsp;
	
	<!-- 引入 jQuery 库 -->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.4.4.min.js"></script>

<script type="text/javascript">
	function checkCode() {
		var userName = $("#user_name").val();
		var formParam = $("#user_name").serialize();
		if (userName.trim() == "") {
			$("#userNameSpan").html("用户名不能为空");
		} else {
			var url = "${pageContext.request.contextPath}/user_checkCode.action";
			var param = {"username":userName};
			// data 是服务端返回的数据
			$.ajax({
                url:"${pageContext.request.contextPath}/registerUserName",
                type: "POST",
                datatype:"json",
                data:{"registerName":$("#user_name").val()},
                success:function(data){
                    //alert(typeof data);测试代码
                    var str = data.result;
                    if(str == "success"){
                    	$("#userNameSpan").html("该用户名可用！");
                     
                    }else{
                    	$("#userNameSpan").html("该用户名不可用！");
                    	
                    } 
                }
                
            });
		}
	}
</script>

<script type="text/javascript">
	
	// 声明一个函数，当函数被触发的时候，则会执行其中的内容
	function sendJson(){
		/* ajax 主要是用来处理异步请求，异步就是整个页面不动，只有需要更新数据的那一部分需要变动*/
		$.ajax({
			type : "post",
			url : "${pageContext.request.contextPath}/sendJSON.action", /* 请求路径 */
			/* 设置数据内容的类型 */
			contentType:"application/json; charset=utf-8",
			/* 请求绑定的数据 */
			data : '{"name":"wangzai", "price":"8.00"}',
			 /* 服务器成功响应后返回的数据
			 	主要是通过回调函数形式来返回数据，参数 result就是服务器返回的数据*/
			success : function(result) {
				alert("success--" + result.name);
			},
			error:function(result){
				alert("error--" + result);
			}
		});
	}

</script>
</body>
</html>